<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
  <style>
    .container {
      margin-top: 100px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <!-- 筛选区域 -->
      <div style="margin-bottom:20px">
        <input v-model="keyword" type="text" class="form-control" style="width:200px;display: inline-block;" placeholder="输入关键字查询">
      </div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>编号</th>
            <th>汽车品牌</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.brandName}}</td>
            <td>{{item.createTime}}</td>
            <td><a href="#" @click.prevent="delBrand(item.id)">删除</a></td>
          </tr>
          <tr v-if="list.length===0">
            <td colspan="4">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <!-- 添加品牌 -->
      <div style="margin-top:20px">
        <input v-model="brandName" type="text" class="form-control" style="width:200px;display: inline-block;" placeholder="请输入品牌名称">
        <button class="btn btn-primary" @click="addBrand()">添加</button>
      </div>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script src="./axios.min.js"></script>
  <script>
    // 1. 渲染品牌列表
    // 2. 删除品牌
    // 3. 添加品牌
    // 4. 搜索品牌
    // 4.1 当你在输入搜索关键字的时候，向后台发起查询请求，把查询的数据渲染列表中。
    // 4.2 监听 输入的搜索关键字改变 
    // 4.3 当搜索关键字改变后，拿着关键字向后台请求得到列表数据，给list赋值。

    const vm = new Vue({
      el: '#app',
      data: {
        // 品牌列表
        list: [],
        // 品牌名称
        brandName: '',
        // 搜索关键字
        keyword: ''
      },
      watch: {
        keyword () {
          // 当keyword发生变化函数执行
          this.getBrands()
        }
      },
      // 配置选项  created 它是一个函数
      // 当vue对象实例化完成的时候回执行created
      created() {
        // 获取品牌列表数据
        this.getBrands()
      },
      methods: {
        // 获取品牌列表数据 
        getBrands() {
          // 通过axios调用接口
          axios.get('http://localhost:3000/brands',{
            params: {
              brandName_like: this.keyword
            }
          }).then(res => {
            // 获取数据成功
            // 赋值data中list （模板视图可以使用）
            this.list = res.data
          }).catch(err => {
            console.log('网络繁忙')
          })
        },
        // 删除品牌
        delBrand (id) {
          // 1. 发送删除请求
          // 2. 如果成功：更新列表
          // 3. 如果失败：删除失败
          if (confirm('您确认删除吗？')) {
            axios.delete(`http://localhost:3000/brands/${id}`).then(res=>{
              // 更新列表
              this.getBrands()
            }).catch(err=>{
              console.log('删除失败')
            })
          }
        },
        // 添加品牌
        addBrand () {
          // this.brandName 获取输入的内容
          if (!this.brandName.trim()) {
            return alert('请输入品牌名称')
          }
          // 发起添加品牌请求
          axios.post('http://localhost:3000/brands',{
            brandName: this.brandName,
            createTime: new Date()
          }).then(res=>{
            // 添加成功 
            // 1. 更新列表
            this.getBrands()
            // 2. 清空内容
            this.brandName = ''
          }).catch(res=>{
            console.log('添加失败')
          })
        }
      }
    })
  </script>
</body>

</html>